<template>
  <div>
      <!-- 头部导航条 -->
      <div class="nav" :class="{white:changeTitle}">
          <div @click="back">
              <img v-show="!changeTitle" src="../assets/images/ProductDetail/back.png" alt="">
              <img v-show="changeTitle" src="../assets/images/ProductDetail/back2.png" alt="">
          </div>
          <!-- <div v-show="changeTitle" class="title">
              <p>商品</p>
              <p>评价</p>
              <p>推荐</p>
          </div> -->
          <div>
              <img v-show="!changeTitle" src="../assets/images/ProductDetail/share.png" alt="" @click="showShare = true">
              <img v-show="changeTitle" src="../assets/images/ProductDetail/share2.png" alt="" @click="showShare = true">
          </div>
          <van-share-sheet v-model="showShare" title="立即分享给好友" :options="options" @select="onSelect"/>
      </div>
      <!-- 主要界面 -->
      <div  ref="bodys" class="main">
          <!-- 第一大屏轮播图 -->
          <div class="img-swiper">
              <van-swipe class="first-swipe" indicator-color="white" :show-indicators="false" autoplay="3000">
                 <van-swipe-item  v-for="(i,index) in goods_info[0]?.gallery_v3" :key="index" >
                     <img :src="i.img_url" alt="">
                  </van-swipe-item>
              </van-swipe> 
          </div>
          <!-- 商品信息 -->
          <div  class="goods-msg">
              <div>
                  <div v-if=" buy_option[0]?.list[this.typeActive]?.price == ''" class="prise"><span>$</span>{{ goods_info[0]?.market_price }}</div>
                  <div v-else class="prise"><span>$</span>{{ buy_option[0]?.list[this.typeActive]?.price }}</div>
              </div>
             <!-- 价格 -->
             <div class="payoff" v-if="activiesID?.first.canJoinActs[0]?.custom_rule_index || coinId?.first.coin_arr[0]?.desc">
                  <div class="tips" v-if="activiesID?.first.canJoinActs && goodsPayOffList?.activies">{{activiesID?.first.canJoinActs[0]?.custom_rule_index }}</div>
                  <div class="tips" v-if="coinId?.first.coin_arr && goodsPayOffList?.activies">{{ coinId?.first.coin_arr[0]?.desc }}</div>
              </div>
              <div class="title">{{ product_info.name }}</div>
              <div class="msg">
                  <div>{{ product_info.product_desc_ext }}</div>
                  <div v-for="(i,index) in product_info.sell_point_desc" :key="index" >
                      <div class="number-msg"><div class="number">{{index+1}}</div> {{ i }}</div>
                  </div>
              </div>
             
          </div>
          <!-- 参数 -->
          <div class="parameter" is-link @click="show2 = true">
              <div class="parameter-content"  v-for="(i,index) in goods_info[0]?.class_parameters.list" :key="index" >
                 <div class="p-box" v-if="i.top_title">
                      <div class="p-title">{{ i.top_title }}</div>
                      <div class="p-value">{{ i.value}}</div>
                  </div>
             </div>
          </div>   
          <!-- 参数详情展示 -->
          <van-action-sheet class="parameter-show" v-model="show2" :title="parameters?.name" >
           <div class="p-content"> 
               <div>
                   <div v-for="(i,index) in  parameters?.list" :key="index">
                       <div class="p-value">
                           <div class="p-name">{{ i.name }}</div>
                           <div class="name-value">{{ i.value }}</div>
                       </div>
                   </div>
               </div>
               <van-button @click="show2 = false" class="p-button" color="linear-gradient(to right, #ff6034, #ee0a24)" block>确定</van-button>
           </div> 
          </van-action-sheet>
          <!-- 选择型号 -->
          <div class="choise">
              <div class="c-text">已选</div>
              <div class="c-action">
                  <van-cell is-link :title="nameTypeColor" @click="show = true" />
                  <van-action-sheet v-model="show" title="">
                      <div class="content">
                          <div>
                              <div class="content-ipn">
                                  <img :src="goods_info[0]?.image_share" alt="">
                                  <div>
                                      <div v-if="buy_option[0]?.list[this.typeActive]?.price == ''">${{goods_info[0]?.market_price }}</div>
                                      <div v-else>${{buy_option[0]?.list[this.typeActive]?.price}}</div>
                                      <div class="computed">{{ nameTypeColor }}</div>  
                                  </div>
                              </div>
                              
                              <div class="c-texts">版本</div>
                              <div class="c-type">
                                  <div class="type-box" :class="{'type-active': typeActive == index }" v-for="(i,index) in buy_option[0]?.list" :key="index" @click="choiseType(index)">
                                      <div>{{ i.name }}</div>
                                      </div>
                                  </div>
                                  <div class="c-texts">颜色</div>
                                  <div class="c-color">
                                      <div class="color-box" :class="{'color-active': colorActive == index }" v-for="(i,index) in buy_option[1]?.list" :key="index" @click="choiseColor(index)">
                                          <div>{{ i.name }}</div>
                                      </div>
                                  </div>
                                  <div class="count">
                                      <div>购买数量</div> <van-stepper class="count-num" v-model="valueNum" />
                                  </div>
                                  <div>
                                      <van-button class="b-button" @click="addGoods" color="#fda000">{{ goods_info[0]?.action_button.button_title }}</van-button>
                                      <van-button class="b-button" color="#fe4f05">{{ goods_info[0]?.action_button.sale_mode_title}}</van-button>
                                  </div>
                                  
                              </div>
                          </div>
                  </van-action-sheet>
              </div>
          </div>
          <!-- 配送 -->
          <div class="deliver">
              <div class="d-text">送至 <span  @click="showArea" v-show="!$store.state.local">北京市-北京市-东城区</span><span class="d-area" @click="showArea" style="font-size: 14px;">{{ $store.state.local }}</span><span class="isnone">有现货</span></div>
              <van-action-sheet v-model="showarea" position="bottom" style="width: 100%; height: 100%;">
                                      <div class="content"> <van-area title="地址" :area-list="areaList" @confirm="changeValue" :value='`${cityvalue}`' /></div>
                                              </van-action-sheet> 
          </div>
          <!-- 用户评价 -->
          <div class="appraise">
              <div class="a-title" @click="goToComment">
                  <div>用户评价</div>
                  <div class="nice">{{ goods_share_datas.comments?.detail.satisfy_per }} &gt;</div>
              </div>
              <div class="a-tags" @click="goToComment">
                 <div class="tags-box" v-for="(i,index) in goods_share_datas.comments?.detail.comment_tags" :key="index">
                  {{ i.tag_name }}
                 </div> 
              </div>
              <div class="appreise-card">
                  <div class="a-scroll">
                      <div class="card-box" v-for="(i,index) in goods_share_datas.comments?.list" :key="index">
                          <div style="display: flex;">
                              <img class="user-img" :src="i.user_avatar" alt="">
                              <div class="name-box"> 
                                  <p class="u-name">{{ i.user_name}}</p>
                                  <p class="send-date">{{ i.add_time }}</p>
                              </div>
                          </div>
                          <div class="a-comment" v-html="i.comment_content"></div>
                          <img v-if="i.comment_images[0]" class="comment-img" :src="i.comment_images[0]" alt="">
                      </div>
                  </div>
              </div>
              
          </div>
          <!-- 更多推荐title -->
          <div class="more-recommend">
              <div class="mr-text">商品推荐</div>
          </div>
           <!-- 更多推荐轮播图 -->
          <div class="recommend-box">
              <van-swipe class="my-swipe" :loop="false" indicator-color="white">
                  <van-swipe-item>        
                      <div class="r-banner">
                          <div  v-for="(i,index) in recommendList" :key="index" @click="goToProduct(i.product_id)">
                              <div class="r-box" v-if="index < 6">
                                  <img :src="i.image_url" alt="">
                                  <div class="r-name">{{ i.name }}</div>
                                  <div class="r-prise">
                                      <div class="prise-now">${{ i.price }}<span>起</span></div>
                                      <div class="prise-old" v-if="i.market_price">${{ i.market_price }}</div>
                                  </div>
                              </div>
                          </div> 
                      </div>
                  </van-swipe-item>

                  <van-swipe-item>
                      <div class="r-banner">
                          <div  v-for="(i,index) in recommendList" :key="index" @click="goToProduct(i.product_id)">
                              <div class="r-box"  v-if="index >= 6 && index < 12 " >
                                  <img :src="i.image_url" alt="">
                                  <div class="r-name">{{ i.name }}</div>
                                  <div class="r-prise">
                                      <div class="prise-now">${{ i.price }}<span>起</span></div>
                                      <div class="prise-old" v-if="i.market_price">${{ i.market_price }}</div>
                                  </div>
                              </div>
                          </div> 
                      </div> 
                  </van-swipe-item>

                  <van-swipe-item>
                      <div class="r-banner">
                          <div  v-for="(i,index) in recommendList" :key="index" @click="goToProduct(i.product_id)">
                              <div class="r-box" v-if="index >= 12 && index < 18">
                                  <img :src="i.image_url" alt="">
                                  <div class="r-name">{{ i.name }}</div>
                                  <div class="r-prise">
                                      <div class="prise-now">${{ i.price }}<span>起</span></div>
                                      <div class="prise-old" v-if="i.market_price">${{ i.market_price }}</div>
                                  </div>
                              </div>
                          </div> 
                      </div>  
                  </van-swipe-item>
              </van-swipe>      
          </div>
      </div>
      <!-- 底部导航栏 -->
          <div class="bottom">
              <van-goods-action>
                  <van-goods-action-icon icon="wap-home-o" text="首页" @click="goToHome"  />
                  <van-goods-action-icon icon="cart-o" text="购物车"  @click="goToCart" />
                  <span class="span-length" v-show="goodsPrice != 0">{{
        goodsPrice
      }}</span>
                  <van-goods-action-button v-show="goods_info[0]?.action_button " type="warning" text="加入购物车" @click="addGoods" />
                  <van-goods-action-button v-show="goods_info[0]?.action_button " type="danger" text="立即购买" @click="Topay" />
              </van-goods-action>
              <!-- <div class="b-home" @click="goToHome">
                  <van-icon name="wap-home-o" size="20px" />
                  <div>首页</div>
              </div>
              <div class="b-buy" @click="goToCart">
                  <van-icon name="shopping-cart-o" size="20px" />
                  <div>购物车</div>
              </div>
              <van-button @click="addGoods" class="b-button" color="#fda000">{{ goods_info[0]?.action_button.button_title }}</van-button>
              <van-button class="b-button" color="#fe4f05">{{ goods_info[0]?.action_button.sale_mode_title}}</van-button> -->
          </div>
  </div>
</template>
<script>
import { areaList } from '@vant/area-data'
import {getGoodsContentApi} from '../assets/api'
import {getGoodsPayOffApi} from '../assets/api'
import {getGoodsRecommendApi} from '../assets/api'
import {mapGetters} from 'vuex'

export default{
  data(){
      return{
          goodsContent:'',
          goods_info:'',
          product_info:'',
          recommendList:'',
          goods_share_datas:'',
          changeTitle:false,
          buy_option:'',
          showShare: false,
          typeActive:0,
          colorActive:0,
          goodsPayOffList:'',
          nameTypeColors:'',
          show:false,
          show2:false,
          valueNum:1,
          goods_id:'',
          options:[ 
                  { name: '微信', icon: 'wechat' },
                  { name: '微博', icon: 'weibo' },
                  ],
          cityvalue:110101,
          showarea:false,
          areaList,
          requestSuccess: false,
          showNone: true
      }
  },
  methods:{
  // 请求商品详情页api
      async getGoodsContent(id){
      let url = getGoodsContentApi(id)
      let {data} = await this.$http(url)
      let goodsContent = data.data
      this.goods_info = goodsContent.goods_info
      this.buy_option = goodsContent.buy_option
      this.product_info = goodsContent.product_info
      this.goods_share_datas = goodsContent.goods_share_datas
      let id1 = goodsContent.goods_info[0]?.commodity_id
      let id2 = goodsContent.goods_info[0]?.goods_id 
      this.goods_id = id2
      this.getGoodsPayOff(id1,id2)
      this.getGoodsRecommend()
      },
  // 请求优惠qpi
      async getGoodsPayOff(id1,id2){
       let url = getGoodsPayOffApi(id1,id2)
       let {data} = await this.$http(url)
       this.goodsPayOffList = data.data 
      //  console.log(this.goodsPayOffList);
      },
  // 请求推荐商品api
      async getGoodsRecommend(){
      let id = this.$route.params.id
      let url = getGoodsRecommendApi(id)
      let {data} = await this.$http(url)
      this.recommendList = data.data.related_recommend.data
      // console.log(this.recommendList);

      },
  // 分享
      onSelect(option){
    this.$toast(option.name);
    this.showShare = false;
      },
  // 更改选择版本
      choiseType(index){
      this.typeActive = index
      },
  //   更改选择颜色
      choiseColor(index){
      this.colorActive = index
      },
  //  返回上一页
      back(){
      this.$router.go(-1)
      },
  //   前往下一个商品详情
      goToProduct(id){
      this.$router.push({
      path:`/productdetails/${id}`
  })
      },
  //   scroll监听
      loading(e){
          const scrollTop = e.target.scrollTop  //滚动条滚动时，举例顶部的距离
          // console.log(scrollTop);
          //  const windowHeight = e.target.clientHeight //可视区的高度
          //  const scrollHeight = e.target.scrollHeight  //滚动条的总高度
          if(scrollTop>=350){
              this.changeTitle = true
          }
          else{
              this.changeTitle = false
      }
      },
  // 返回首页
      goToHome(){
    this.$router.push({
      name:'home'
    })  
      },
  // 前往购物车
      goToCart(){
    this.$router.push({
      name:'cart'
    })  
      },
  // 加入购物车 
      addGoods(){
          if(this.$store.state.loginstate){
               let g = {
              content:this.nameTypeColor,
              number:this.valueNum,
              img: this.goods_info[0]?.image_share,
              price:this.price,
              id:Date.now(),
              isSelete: true
          }
          // console.log(g);
          this.$toast('已加入购物车')
          this.show = false
          this.$store.commit('addGoods',g)
          }
          else{
              this.$toast("请登录")
              this.$router.push({
                  path:'/login'
              })
          }
         
      },
      //显示地址列表
      showArea(){
          this.showarea = !this.showarea
      },
       //获取地址名称
       changeValue(a){
          this.cityvalue = a[2].code
          console.log(a[0].name);
          let d = `${a[0].name}-${a[1].name}-${a[2].name}`
          this.$store.commit("changelocal",d)
          this.showarea = false
      },
      // 
      goToComment(){
          // console.log(id);
          let a = this.goods_info[0]?.goods_id
          // console.log(a);
          this.$router.push({
              path:`/Comment/${a}`
          })
      },
      // 去评论
      Topay(){
          if(this.$store.state.loginstate){
          let payId = new Date().getTime()
          let payCartList = JSON.parse(localStorage.payCartList || '[]')
          let payCart = {
            payId,
            payCart: this.payCart,
            payMoney: this.totalAmount,
            payNum: this.goodsNum,
            payName: "aa",
            payAddress: "aa",
            payType: 0,
            state: 1    // 1 为未支付，2 为待发货，3为已收货
          }
          payCartList = [payCart, ...payCartList.filter(k => k.id !== payId)]
          localStorage.payCartList = JSON.stringify(payCartList)
  
          this.$router.push({
            path:`/settlement/${payId}`
          })
           }else{
             this.$toast("请登录")
             this.$router.push({
                  path:'/login'
              })
           }
  }
  },
  computed:{
    ...mapGetters(["goodsPrice"]),
     price(){
      if(this.buy_option[0]?.list[this.typeActive]?.price == ''){
          let a = this.goods_info[0]?.market_price?.split('元')[0]
          console.log(a,222);
          return a
      }else{
          let a =this.buy_option[0]?.list[this.typeActive]?.price.split('元')[0]
          console.log(a,111);
          return a
      }
     },
     activiesID(){
      let a = this.goodsPayOffList?.activies?.[this.goods_id]
      return a
     },
     coinId(){
      let a = this.goodsPayOffList?.coin?.[this.goods_id]
      return a 
     },
     parameters(){
      let a = this.goods_info[0]?.class_parameters
      return a
     },
     nameTypeColor(){
         let a = this.buy_option[0]?.list[this.typeActive]?.name
         let b = this.buy_option[1]?.list[this.colorActive]?.name
         let c = this.product_info.name
         let d = c+b+a
         return d
     },
     
  },
  beforeRouteUpdate(to,from,next){
      // console.log(to);
      let id = to.params.id
      // this.$refs.scrollTop = 0
      this.getGoodsContent(id)
      this.$refs.bodys.scrollTop = 0
      next()
  },
  mounted(){
      this.getGoodsContent(this.$route.params.id)
      this.$refs.bodys.addEventListener('scroll',this.loading)
  }
}
</script>
<style lang="scss" scoped>
.nav{
  display: flex;
  position: fixed;
  height: 5vh;
  width: 100%;
  // background-color: red;
  justify-content: space-between;
  z-index: 10;
  top: 0;
  
  &.white{
     background-color: #fff; 
  }
 
  .title{
      display: flex;
      // width: 100vw;
      p{
          font-size: 14px;
          margin: 0 2vw 0 2vw ;
          padding: 1vh 1vw 1vh  1vw;
      }
  }
  img{
      height: 5vh;
  }
  .back{
      padding: 1vw 0 0 0vw;
      color: white;
  }
  .share{
      padding: 1vw 0 0 0;
      color: white;
  }
}
.main{
  overflow: scroll;
  height: 94vh;
  scrollbar-width:none ;
  .first-swipe{
  img{
      height: 52vh;
      width: 100%;
  }
  } 
  .goods-msg{
      margin: 0 0 0 5vw;
      padding: 0 0 1vh 0 ;
      border-bottom: 1px solid #f2f2f2;
      .prise{
          color: #ff6700;
          font-size: 24px;
          font-weight: bolder;
          span{
            font-size: 14px;
            margin-right: .5vw;
          }
      }
      .payoff{
          background-color: #fff2ef;
          display: flex;
          width: 95%;
          height: 5.5vh;
          margin: 1.5vh 0 1.5vh 0 ;
          font-size: 10px;
          border-radius: 5px;
          .tips{
              border: 1px solid #ff6700;
              height: 2.5vh;
              color: #ff6700;
              margin: 1.5vh 0vw 0 3vw ;
              padding: 0 1vw 0 1vw ;
              border-radius: 4px;
          }
          .more-payoff{
              // float: right;
              position: relative;
              top: 1.5vh;
              left: 42vw;
              width: 10vw;
              height: 2vh;
              border-radius: 3px;
              text-align: center;
              background-color: #ff6700;
              color: #fff;
          }

      }
      .title{
          font-weight: bolder;
          font-size: 16px;
          margin: 1vh 0 1vh 0;
      }
      .msg{
         font-size: 12px;
         .number-msg{
            display: flex;
            margin: 1vw 0 0 0;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 95%;
            .number{
              border: 1px solid #878787;
              font-size: 8px;
              border-radius: 50%;
              text-align: center;
              height: 3vw;
              line-height: 3.5vw;
              // padding: .3vw .3vw .3vw .3vw;
              width: 3vw;
              color: #878787;
              margin: 1vw 1vw 0 0;
            }
         }
      }
      .more-welfare{
          background-color: #f0f0f0;
          height: 3vh;
          line-height: 3vh;
          // width: auto;
          font-size: 12px;
          padding: 0vw 2vw 0vw 2vw ;
          border-radius: 10px;
          width: 55%;
          margin: 1.5vh 0 1.5vh 0 ;
      }
  } 
  .parameter{
      display: flex;
      overflow: scroll;
      scrollbar-width: none;
      padding: 2vw 0 3vw 0 ;
      margin: 2vh 0 2vh 0 ;
      .parameter-content{
          width: 24vw;
          .p-box{
              margin: 0 3vw 0 3vw ;
              width: 24vw;
             .p-title{
              font-size: 12px;
              text-align: center;
              margin: 0 0 0 -2vw;
             }
             .p-value{
              font-size: 5px;
              white-space: nowrap;
              width: 22vw;
              overflow: hidden;
              text-overflow: ellipsis;
              text-align: center;
             }  
          }
          
      }
      
  }
  .parameter-show{
      // position: relative;
      .p-content{
          width: 100vw;
          height: 60vh;
          .p-value{
              display: flex;
              margin: 3vh 5vw 3vh 5vw;
              .p-name{
                  color: #7f7f7f;
                  font-size: 14px;
                  margin: 0 10vw 0 0;
                  width: 20vw;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  font-weight: bold;
                  white-space: nowrap;
              }
              .name-value{
                  font-size: 14px;
                  margin: 0 0 0 0;
                  width: 60vw;
                  font-weight: bold;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
              }
          }
          .p-button{
              width: 92%;
              position: absolute;
              bottom: 0;
              left: 0;
              margin: 0 0 0 3vw;
              border-radius: 999px;
          }
      }
  }
  .choise{
      display: flex;
      height: 5vh;
      line-height: 5vh;
      .c-text{
          margin: 0 5vw 0 5vw;
          text-align: center;
          font-size: 16px;
      }
      .c-action{
          margin: -.5vw 0 0 0;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          width: 60vw;
      }
      .content{
          height: 65vh;
          margin: 0 0 0 5vw;
          img{
              width: 20vw;
          }
          .c-texts{
              font-weight: border;
          }
          .c-type{
              font-size: 12px;
              margin: 0 0 0 2vw;
              // width: auto;
              display: flex;
              flex-wrap: wrap;
              .type-box{
                  border-radius: 999px;
                  // border: 1px solid #ff5934;
                  padding: 1vw 3vw 1vw 3vw ;
                  margin: 1vh 3vw 1vh 0vw ;
                  line-height: 3vh;
                  height: 3vh;
                  background-color: #f5f5f5;
                  // color: #ff5934;
                  &.type-active{
                      border: 1px solid #ff5934;
                      color: #ff5934;
                      background-color: #fff2ef;
              }
              }
          }
          .c-color{
              font-size: 12px;
              margin: 0 0 0 2vw;
              // width: auto;
              display: flex;
              flex-wrap: wrap;
              .color-box{
                  border-radius: 999px;
                  // border: 1px solid #ff5934;
                  padding: 1vw 3vw 1vw 3vw ;
                  margin: 1vh 3vw 1vh 0vw ;
                  line-height: 3vh;
                  height: 3vh;
                  background-color: #f5f5f5;
                  // color: #ff5934;
                  &.color-active{
                      border: 1px solid #ff5934;
                      color: #ff5934;
                      background-color: #fff2ef;
              }
              }
          }
          .count{
              display: flex;
              margin: 2vh 0 2vh 0;
              .count-num{
               position: relative;
               left: 50vw;
              }
          }
          .content-ipn{
              display: flex;
              .computed{
                  font-size: 14px;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  width: 60vw;
              }
          }
          .b-button{
              width: 45vw;
              margin: 1vh 0vw 1vh 0vw;
          }
      }
  }
  .deliver{
      margin: 2vh 0 2vh 5vw;
      font-size: 14px;
      span{
         margin: 0 0vw 0 9vw;
      }
      .isnone{
          margin: 0 0 0 5vw;
          color: red;
      }
      .d-area{
          width: 50vw;
          overflow: hidden;
      }
  }
  .server{
      margin: 3vh 5vw 3vh 5vw ;
      font-size: 14px;
  }
  .recommend{
      margin: 3vh 5vw 3vh 5vw ;
      font-size: 14px;
  }
  .appraise{
      margin: 3vh 5vw 3vh 5vw ;
      font-size: 14px;
      .a-title{
          display: flex;
          .nice{
              font-size: 12px;
              color: #7f7f7f;
              position: relative;
              left: 55vw;
          }
      }
      .a-tags{
              display: flex;
              flex-wrap: wrap;
              .tags-box{
                  padding: 1vw;
                  background-color: #ffeeea;
                  font-size: 10px;
                  border-radius: 999px;
                  margin: 1vh 3vw 1vh 0;
                  width: 14vw;
                  text-align: center;
              }
      }
      .appreise-card{
          margin: 1vh 0 1vh 0;
          overflow: scroll;
          scrollbar-width: none;
          flex-wrap: nowrap;
          width: 95vw;
          .a-scroll{
              width: 200vh;
              display: flex;  
          }
          .card-box{
              flex: 5;
              width: 75vw;
              height: 25vh;
              border: 1px solid #e5e5e5;
              border-radius: 10px;
              padding: 4vw 0 0 3vw;
              margin: 0 5vw 0 0;
              .user-img{
                  height: 4.5vh;
                  width: 4.5vh;
                  border-radius: 999px;
                  margin: 2vw 0 0 0;
              }
              .name-box{
                  margin: -3.5vw 0 0 3vw;
                  .user-name{
                      font-weight: bold;
                  }
                  .send-date{
                      color: #7f7f7f;
                      margin: -3vw 0 0 0;
                      font-size: 10px;
                  }
              }
              .a-comment{
                  margin: 1vh 0 1vh 0;
                  width: 90%;
                  height: 5vh;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  font-size: 12px;
                  color: #7f7f7f;
              }
              .comment-img{
                  border-radius: 10px;
                  margin: 2vw 0 0 0 ;
                  width: 18vw;
                  height: 18vw;
              }
          }
      }
  }
  .more-recommend{
      .mr-text{
          text-align: center;
      }
  }
  .recommend-box{
      width: 85%;
      display: flex;
      // flex-wrap: wrap;
      margin: 3vh 5vw 3vh 5vw ;
      img{
          width: 28vw;
          background-color:#f7f7f7 ;
      }
      .r-banner{
          display: flex;
          flex-wrap: wrap;
          height: 50vh;
          width: 100vw;
          .r-box{
              margin: 0 2vw 0 0;
          }
      }
      .r-name{
          font-size: 13px;
          margin: 0 0 0 0;
          width: 28vw;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
      }
      .r-prise{
          color: #ff6700;
          display: flex;
          margin: 1vh 0 0 0;
          .prise-now{
              font-weight: border;
              color: #ff6700;
              span{
                  font-size: 12px;
              }
          }
          .prise-old{
              text-decoration: line-through;
              color: #7f7f7f;
              font-size: 12px;
              margin: 1vw 0 0 1vw;
          }
      }
  }

}
.bottom{
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  background-color: white;
  font-size: 12px;
  height: 6vh;
  padding: 2vw 3vw 1vw 3vw;
  border-top:1px solid #e5e5e5;
   .span-length {
      position: absolute;
      top: 0;
      right: 73vw;
      color: #fff;
      display: block;
      width: 5vw;
      height: 5vw;
      line-height: 5vw;
      text-align: center;
      border-radius: 50%;
      background-color: red;
    }
  .b-home{
      margin: 0 4vw 0 4vw;
      text-align: center;
  }
  .b-buy{
      text-align: center;
      margin: 0 4vw 0 4vw;
  }
  .b-button{
      width: 30vw;
      font-size: 14px;
      margin: -1vw 0 0 0;
  }
}

</style>